<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Responsive Bootstrap 4 Admin &amp; Dashboard Template">
  <meta name="author" content="Bootlab">

  <title>供应链金融交易系统</title>

  <link href="css/classic.css" rel="stylesheet">
  <link href="css/ext.css" rel="stylesheet">
</head>

<body>
  <div class="wrapper">
 
      <nav class="sidebar">
        <div class="sidebar-content ">
          <a class="sidebar-brand" href="index.html">
            <i class="align-middle" data-feather="command"></i>
            <span class="align-middle">供应链金融平台</span>
          </a>



        </div>
      </nav>

      <div class="main">
        <nav class="navbar navbar-expand navbar-light bg-white">
          <a class="sidebar-toggle d-flex mr-2">
            <i class="hamburger align-self-center"></i>
          </a>

          <form class="form-inline d-none d-sm-inline-block">
            <input class="form-control form-control-no-border mr-sm-2" type="text" placeholder="Search projects..."
              aria-label="Search">
          </form>

          <div class="navbar-collapse collapse">
            <span class="navbar-text ml-auto d-none d-xl-inline-block">

            </span>
            <ul id='messages_events' class="navbar-nav ml-auto ml-xl-0">

              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
                  <span class="d-inline-block d-sm-none">
                    <i class="align-middle" data-feather="settings"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">
                    <img src="img/avatar.jpg" class="avatar img-fluid rounded-circle mr-1" alt="XXX员工" /> <span
                      class="text-dark">XXX员工</span>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                  <a class="dropdown-item" href="pages-profile.html"><i class="align-middle mr-1"
                      data-feather="user"></i> Profile</a>
                  <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="pie-chart"></i>
                    Analytics</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="pages-settings.html">Settings & Privacy</a>
                  <a class="dropdown-item" href="#">Help</a>
                  <a class="dropdown-item" href="#">Sign out</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
        <main class="content">

          <div class="container-fluid p-0">
            <div class="row">
              <div class="col-md-12 col-xl-12">
                <div class="card">
                  <div class="card-header">

                    <h5 class="card-title mb-0">应收账款查询</h5>
                  </div>
                  <div class="card-body">
                    <form>
                      <div class="row">
                        <div class="col-md-4">
                          <div class="form-group">
                            <label for="inputUsername">项目编号</label>
                            <input type="text" class="form-control" id="inputUsername" placeholder="Username">
                          </div>
                          <div class="form-group">
                            <label for="inputUsername">协议编号</label>
                            <input type="text" class="form-control" id="inputUsername" placeholder="Username">
                          </div>

                        </div>
                        <div class="col-md-4">

                          <div class="form-group">
                            <label for="inputUsername">资产持有方</label>
                            <input type="text" class="form-control" id="inputUsername" placeholder="Username">
                          </div>
                          <div class="form-group">
                            <label for="inputUsername">资产推送方</label>
                            <input type="text" class="form-control" id="inputUsername" placeholder="Username">
                          </div>

                        </div>



                      </div>

                      <button type="submit" class="btn btn-primary">查询</button>
                    </form>

                  </div>
                </div>

                <div class="card">
                  <div class="card-header">
                    <div class="card-actions float-right">
                      <div class="dropdown show">
                        <a href="#" data-toggle="dropdown" data-display="static">
                          <i class="align-middle" data-feather="more-horizontal"></i>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right">
                          <a class="dropdown-item" href="#">Action</a>
                          <a class="dropdown-item" href="#">Another action</a>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                      </div>
                    </div>
                    <h5 class="card-title mb-0">应收账款查询结果</h5>
                  </div>
                  <table class="table">
                    <thead>
                      <tr>
                        <th style="width:10%;">项目名称</th>
                        <th style="width:10%">协议编号</th>
                        <th style="width:10%">持有方名称</th>
                        <th>资产数量</th>
                        <th>保证金账户余额</th>

                        <th>详情</th>
                      </tr>
                    </thead>
                    <tbody id='table-bar'>

                    </tbody>
                  </table>
                  <script>
                    document.addEventListener("DOMContentLoaded", function () {
                      tb = document.getElementById("table-bar")
                      // 定义的数组,根据数组,渲染生成页面内容
                      var arr = [
                        ['纳通医疗', 'XY10011','纳通医药有限公司', 2, 200000,    ''],
                        ['重庆医股', 'XY10013','重庆医药股份公司', 1, 500000,    ''],
                        ['东北制药', 'XY10012','东北制药集团', 1, 1300000,   ''],
                        ['广州国盈', 'A12320','广州国盈', 1, 71000,  ''],
                      ];

                      // 定义变量,存储要写入的内容
                      var str = '';

                      // 外层循环,生成tr标签,有一维单元,就循环生成几个tr标签
                      // 从第一个索引 0 开始,最终数值是索引下标的最大值 --- 数组.length-1
                      // 生成所有索引下标的数值
                      // 根据数组的结构,定义循环次数,起始数值一定是0,结束数值是索引下标的最大值
                      for (var i = 0; i <= arr.length - 1; i++) {
                        // console.log(arr[i]);

                        // 外层循环生成tr标签,循环几次,就生成几个tr标签
                        // 因为tr标签中还要有td内容,要将两个tr标签,分开,写成拼接的形式
                        str += '<tr>';
                        // 定义tr标签的内容,也就是td单元格标签
                        // 第一个单元格是单独生成的,不参与内层循环,是 当前 外层循环 索引下标+1


                        // 其他单元格,是内层循环生成的,循环的对象是二维数组
                        // arr[i] 拿到的就是 每次循环,当前行,对应的二维数组
                        // 循环的对象是 arr[i] , 生成 arr[i] 的所有的 索引下标
                        // 通过索引下标,获取对应的数据
                        // 起始数值是0 终止数值是 arr[i]的最大索引下标,arr[i]的length-1  arr[i].length-1
                        for (var j = 0; j <= arr[i].length - 1; j++) {
                          // 二维数组有几个单元,就循环几次,生成几个td单元个
                          // 可以生成对应的单元格
                          // 每一个单元的内容,就是当前二维数组单元的数据内容
                          // 获取二维数组, 数组变量[一维索引][二维索引] 一维索引是i 二维索引是j
                          // arr[i][j]
                          if (j == arr[i].length - 1) {
                            str += `<td class="table-action"><a href="demo_客户_应收账款.html"><i class="align-middle" data-feather="edit-2"></i></a><a href="demo_客户_应收账款.html"><i class="align-middle" data-feather="eye"></i></a></td>`;
                          }   else {
                            str += `<td>${arr[i][j]}</td>`;
                          }

                        }

                        str += '</tr>';
                      }


                      // 将定义好的内容,写入到tbody标签中
                      tb.innerHTML = str;

                    });
                  </script>

                </div>


              </div>
            </div>

          </div>


        </main>

        <footer class="footer">
          <div class="container-fluid">
            <div class="row text-muted">
              <div class="col-6 text-left">
                <ul class="list-inline">
                  <li class="list-inline-item">
                    <a class="text-muted" href="#">Support</a>
                  </li>
                  <li class="list-inline-item">
                    <a class="text-muted" href="#">Help Center</a>
                  </li>
                  <li class="list-inline-item">
                    <a class="text-muted" href="#">Privacy</a>
                  </li>
                  <li class="list-inline-item">
                    <a class="text-muted" href="#">Terms of Service</a>
                  </li>
                </ul>
              </div>
              <div class="col-6 text-right">
                <p class="mb-0">
                  &copy; 2018 - <a href="index.html" class="text-muted">CMBC</a>
                </p>
              </div>
            </div>
          </div>
        </footer>
      </div>
 
  </div>
  <script src="js/messages.js"></script>
  <script src="js/menu.js"></script>
  <script>
    var div = document.getElementsByClassName('sidebar-content')[0]
	  var ul = mySiderMenu.initDocumentMenu(2,1, 0)
    div.appendChild(ul)

    var ele = document.getElementById('messages_events')

    var li_alerts = myAlerts.initDocumentAlerts()
    ele.insertBefore(li_alerts, ele.childNodes[0])

    var li_messages = myMessages.initDocumentMessages()
    ele.insertBefore(li_messages, ele.childNodes[0])
  </script>


  <script src="js/app.js"></script>
</body>

</html>